<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>项目详情弹窗</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background-color: #f5f7fa;
            color: #333;
        }

        /* 弹窗遮罩 */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }

        .modal-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        /* 弹窗主体 */
        .modal {
            background: white;
            border-radius: 12px;
            width: 90%;
            max-width: 800px;
            max-height: 90vh;
            overflow: hidden;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            transform: scale(0.95) translateY(20px);
            transition: all 0.3s ease;
        }

        .modal-overlay.active .modal {
            transform: scale(1) translateY(0);
        }

        /* 弹窗头部 */
        .modal-header {
            padding: 24px 30px;
            border-bottom: 1px solid #e5e7eb;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #f9fafb;
        }

        .modal-title {
            font-size: 20px;
            font-weight: 600;
            color: #1f2937;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .modal-title .project-code {
            font-family: 'Monaco', 'Menlo', monospace;
            font-size: 14px;
            color: #6366f1;
            background: #e0e7ff;
            padding: 4px 8px;
            border-radius: 6px;
        }

        .close-btn {
            width: 32px;
            height: 32px;
            border: none;
            background: #f3f4f6;
            border-radius: 6px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #6b7280;
            transition: all 0.2s;
        }

        .close-btn:hover {
            background: #e5e7eb;
            color: #374151;
        }

        /* 弹窗内容 */
        .modal-content {
            padding: 30px;
            max-height: calc(90vh - 140px);
            overflow-y: auto;
        }

        /* 表单布局 */
        .form-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 24px;
            margin-bottom: 24px;
        }

        .form-group {
            display: flex;
            flex-direction: column;
        }

        .form-group.full-width {
            grid-column: 1 / -1;
        }

        .form-label {
            font-size: 14px;
            font-weight: 500;
            color: #374151;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .required {
            color: #ef4444;
        }

        .form-input, .form-select, .form-textarea {
            padding: 12px 16px;
            border: 1px solid #d1d5db;
            border-radius: 8px;
            font-size: 14px;
            transition: all 0.2s;
            background: white;
        }

        .form-input:focus, .form-select:focus, .form-textarea:focus {
            outline: none;
            border-color: #6366f1;
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
        }

        .form-input:disabled {
            background: #f9fafb;
            color: #6b7280;
            cursor: not-allowed;
        }

        .form-textarea {
            resize: vertical;
            min-height: 100px;
        }

        /* 状态标签 */
        .status-display {
            display: inline-flex;
            align-items: center;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 500;
        }

        .status-display.pending {
            background: #fef3c7;
            color: #92400e;
        }

        .status-display.active {
            background: #d1fae5;
            color: #065f46;
        }

        .status-display.completed {
            background: #dbeafe;
            color: #1e40af;
        }

        .status-display.suspended {
            background: #fee2e2;
            color: #991b1b;
        }

        /* 项目类型标签 */
        .type-display {
            display: inline-flex;
            align-items: center;
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 13px;
            font-weight: 500;
            background: #f3f4f6;
            color: #374151;
        }

        /* 日期信息 */
        .date-info {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            color: #6b7280;
        }

        /* 按钮组 */
        .modal-actions {
            padding: 20px 30px;
            border-top: 1px solid #e5e7eb;
            display: flex;
            justify-content: flex-end;
            gap: 12px;
            background: #f9fafb;
        }

        .btn {
            padding: 10px 20px;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
            border: 1px solid transparent;
        }

        .btn-secondary {
            background: white;
            color: #374151;
            border-color: #d1d5db;
        }

        .btn-secondary:hover {
            background: #f9fafb;
        }

        .btn-primary {
            background: #6366f1;
            color: white;
        }

        .btn-primary:hover {
            background: #5856eb;
        }

        .btn-danger {
            background: #ef4444;
            color: white;
        }

        .btn-danger:hover {
            background: #dc2626;
        }

        /* 编辑模式切换 */
        .edit-toggle {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 24px;
            padding: 12px 16px;
            background: #f0f9ff;
            border: 1px solid #bae6fd;
            border-radius: 8px;
        }

        .edit-toggle.edit-mode {
            background: #fef3c7;
            border-color: #fcd34d;
        }

        .mode-indicator {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #3b82f6;
        }

        .edit-mode .mode-indicator {
            background: #f59e0b;
        }

        /* 响应式 */
        @media (max-width: 768px) {
            .modal {
                width: 95%;
                margin: 20px;
            }

            .form-grid {
                grid-template-columns: 1fr;
                gap: 16px;
            }

            .modal-content {
                padding: 20px;
            }

            .modal-header {
                padding: 20px;
            }

            .modal-actions {
                padding: 16px 20px;
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <!-- 演示按钮 -->
    <div style="padding: 50px; text-align: center;">
        <button onclick="openModal('view')" style="padding: 12px 24px; margin: 0 10px; background: #6366f1; color: white; border: none; border-radius: 8px; cursor: pointer;">查看项目</button>
        <button onclick="openModal('edit')" style="padding: 12px 24px; margin: 0 10px; background: #10b981; color: white; border: none; border-radius: 8px; cursor: pointer;">编辑项目</button>
    </div>

    <!-- 弹窗 -->
    <div class="modal-overlay" id="modalOverlay">
        <div class="modal">
            <div class="modal-header">
                <div class="modal-title">
                    <span id="modalTitleText">项目详情</span>
                    <span class="project-code" id="projectCodeDisplay">SEO-ABC-2024-01</span>
                </div>
                <button class="close-btn" onclick="closeModal()">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <line x1="18" y1="6" x2="6" y2="18"></line>
                        <line x1="6" y1="6" x2="18" y2="18"></line>
                    </svg>
                </button>
            </div>

            <div class="modal-content">
                <div class="edit-toggle" id="modeIndicator">
                    <div class="mode-indicator"></div>
                    <span id="modeText">查看模式</span>
                </div>

                <form id="projectForm">
                    <div class="form-grid">
                        <!-- 项目编码 (只读) -->
                        <div class="form-group">
                            <label class="form-label">
                                项目编码 <span class="required">*</span>
                            </label>
                            <input type="text" class="form-input" id="projectCode" value="SEO-ABC-2024-01" disabled>
                        </div>

                        <!-- 客户名称 -->
                        <div class="form-group">
                            <label class="form-label">
                                客户名称 <span class="required">*</span>
                            </label>
                            <input type="text" class="form-input" id="customerName" value="ABC科技有限公司" readonly>
                        </div>

                        <!-- 客户域名 -->
                        <div class="form-group">
                            <label class="form-label">
                                客户域名 <span class="required">*</span>
                            </label>
                            <input type="url" class="form-input" id="customerDomain" value="https://abc-tech.com" readonly>
                        </div>

                        <!-- 项目类型 -->
                        <div class="form-group">
                            <label class="form-label">
                                项目类型 <span class="required">*</span>
                            </label>
                            <div id="projectTypeDisplay" class="type-display">SEO优化</div>
                            <select class="form-select" id="projectTypeSelect" style="display: none;">
                                <option value="SEO">SEO优化</option>
                                <option value="BACKLINK_PACKAGE">外链套餐</option>
                                <option value="BACKLINK_PREPAID">外链预付费</option>
                            </select>
                        </div>

                        <!-- 项目状态 -->
                        <div class="form-group">
                            <label class="form-label">项目状态</label>
                            <div id="statusDisplay" class="status-display pending">待开始</div>
                            <select class="form-select" id="statusSelect" style="display: none;">
                                <option value="PENDING">待开始</option>
                                <option value="ACTIVE">进行中</option>
                                <option value="COMPLETED">已完成</option>
                                <option value="SUSPENDED">已暂停</option>
                            </select>
                        </div>

                        <!-- 客户经理 -->
                        <div class="form-group">
                            <label class="form-label">客户经理</label>
                            <input type="text" class="form-input" id="customerManager" value="张经理" readonly>
                        </div>

                        <!-- 开始日期 -->
                        <div class="form-group">
                            <label class="form-label">开始日期</label>
                            <input type="date" class="form-input" id="startDate" value="2024-01-20" readonly>
                        </div>

                        <!-- 结束日期 -->
                        <div class="form-group">
                            <label class="form-label">结束日期</label>
                            <input type="date" class="form-input" id="endDate" value="2024-12-20" readonly>
                        </div>

                        <!-- 合同条款 -->
                        <div class="form-group full-width">
                            <label class="form-label">合同条款</label>
                            <textarea class="form-textarea" id="contractTerms" readonly placeholder="请输入合同条款详情...">
{
  "budget": "8000元",
  "payment_terms": "分期付款",
  "deliverables": ["关键词排名提升", "流量增长报告", "月度SEO分析"],
  "milestones": [
    {"phase": "关键词研究", "duration": "2周"},
    {"phase": "网站优化", "duration": "4周"},
    {"phase": "内容优化", "duration": "8周"},
    {"phase": "效果监控", "duration": "持续"}
  ]
}</textarea>
                        </div>
                    </div>
                </form>
            </div>

            <div class="modal-actions">
                <button class="btn btn-secondary" onclick="closeModal()">取消</button>
                <button class="btn btn-secondary" id="editBtn" onclick="toggleEditMode()">编辑</button>
                <button class="btn btn-primary" id="saveBtn" onclick="saveProject()" style="display: none;">保存</button>
                <button class="btn btn-danger" id="deleteBtn" style="display: none;">删除</button>
            </div>
        </div>
    </div>

    <script>
        let isEditMode = false;
        let currentMode = 'view';

        // 状态映射
        const statusMap = {
            'PENDING': { text: '待开始', class: 'pending' },
            'ACTIVE': { text: '进行中', class: 'active' },
            'COMPLETED': { text: '已完成', class: 'completed' },
            'SUSPENDED': { text: '已暂停', class: 'suspended' }
        };

        const typeMap = {
            'SEO': 'SEO优化',
            'BACKLINK_PACKAGE': '外链套餐',
            'BACKLINK_PREPAID': '外链预付费'
        };

        // 打开弹窗
        function openModal(mode = 'view') {
            currentMode = mode;
            const overlay = document.getElementById('modalOverlay');
            overlay.classList.add('active');
            
            if (mode === 'edit') {
                toggleEditMode();
            } else {
                setViewMode();
            }
        }

        // 关闭弹窗
        function closeModal() {
            const overlay = document.getElementById('modalOverlay');
            overlay.classList.remove('active');
            setViewMode();
        }

        // 切换编辑模式
        function toggleEditMode() {
            isEditMode = !isEditMode;
            
            if (isEditMode) {
                setEditMode();
            } else {
                setViewMode();
            }
        }

        // 设置查看模式
        function setViewMode() {
            isEditMode = false;
            
            // 更新标题和指示器
            document.getElementById('modalTitleText').textContent = '项目详情';
            document.getElementById('modeText').textContent = '查看模式';
            document.getElementById('modeIndicator').classList.remove('edit-mode');
            
            // 设置表单字段为只读
            const inputs = document.querySelectorAll('.form-input:not(#projectCode), .form-textarea');
            inputs.forEach(input => {
                input.readOnly = true;
            });
            
            // 显示状态和类型的展示版本
            document.getElementById('statusDisplay').style.display = 'inline-flex';
            document.getElementById('statusSelect').style.display = 'none';
            document.getElementById('projectTypeDisplay').style.display = 'inline-flex';
            document.getElementById('projectTypeSelect').style.display = 'none';
            
            // 更新按钮
            document.getElementById('editBtn').style.display = 'inline-block';
            document.getElementById('editBtn').textContent = '编辑';
            document.getElementById('saveBtn').style.display = 'none';
            document.getElementById('deleteBtn').style.display = 'none';
        }

        // 设置编辑模式
        function setEditMode() {
            isEditMode = true;
            
            // 更新标题和指示器
            document.getElementById('modalTitleText').textContent = '编辑项目';
            document.getElementById('modeText').textContent = '编辑模式';
            document.getElementById('modeIndicator').classList.add('edit-mode');
            
            // 设置表单字段为可编辑
            const inputs = document.querySelectorAll('.form-input:not(#projectCode), .form-textarea');
            inputs.forEach(input => {
                input.readOnly = false;
            });
            
            // 显示下拉选择框
            document.getElementById('statusDisplay').style.display = 'none';
            document.getElementById('statusSelect').style.display = 'block';
            document.getElementById('projectTypeDisplay').style.display = 'none';
            document.getElementById('projectTypeSelect').style.display = 'block';
            
            // 同步选择框的值
            const currentStatus = getCurrentStatus();
            const currentType = getCurrentType();
            document.getElementById('statusSelect').value = currentStatus;
            document.getElementById('projectTypeSelect').value = currentType;
            
            // 更新按钮
            document.getElementById('editBtn').textContent = '取消编辑';
            document.getElementById('saveBtn').style.display = 'inline-block';
            document.getElementById('deleteBtn').style.display = 'inline-block';
        }

        // 获取当前状态
        function getCurrentStatus() {
            const statusDisplay = document.getElementById('statusDisplay');
            for (const [key, value] of Object.entries(statusMap)) {
                if (statusDisplay.classList.contains(value.class)) {
                    return key;
                }
            }
            return 'PENDING';
        }

        // 获取当前类型
        function getCurrentType() {
            const typeText = document.getElementById('projectTypeDisplay').textContent;
            for (const [key, value] of Object.entries(typeMap)) {
                if (value === typeText) {
                    return key;
                }
            }
            return 'SEO';
        }

        // 保存项目
        function saveProject() {
            // 获取表单数据
            const formData = {
                project_code: document.getElementById('projectCode').value,
                customer_name: document.getElementById('customerName').value,
                customer_domain: document.getElementById('customerDomain').value,
                project_type: document.getElementById('projectTypeSelect').value,
                status: document.getElementById('statusSelect').value,
                customer_manager: document.getElementById('customerManager').value,
                start_date: document.getElementById('startDate').value,
                end_date: document.getElementById('endDate').value,
                contract_terms: document.getElementById('contractTerms').value
            };
            
            // 验证必填字段
            if (!formData.customer_name || !formData.customer_domain) {
                alert('请填写必填字段');
                return;
            }
            
            // 模拟保存
            console.log('保存项目数据:', formData);
            
            // 更新显示
            updateDisplayValues(formData);
            
            // 切换回查看模式
            setViewMode();
            
            alert('项目保存成功！');
        }

        // 更新显示值
        function updateDisplayValues(data) {
            // 更新状态显示
            const statusDisplay = document.getElementById('statusDisplay');
            const statusInfo = statusMap[data.status];
            statusDisplay.className = `status-display ${statusInfo.class}`;
            statusDisplay.textContent = statusInfo.text;
            
            // 更新类型显示
            document.getElementById('projectTypeDisplay').textContent = typeMap[data.project_type];
        }

        // 点击遮罩关闭弹窗
        document.getElementById('modalOverlay').addEventListener('click', function(e) {
            if (e.target === this) {
                closeModal();
            }
        });

        // ESC键关闭弹窗
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                closeModal();
            }
        });
    </script>
</body>
</html>